<template>
  <div>
    <div class="add_btn_top">
      <el-button
        icon="el-icon-plus"
        type="primary"
        size="mini"
        @click="handleAdd"
        >添加规则</el-button
      >
      <div style="margin: 0 10px" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch class="screenSwitch" active-color="#2680D2" v-model="screen">
      </el-switch>
    </div>
    <el-container>
      <el-main style="padding: 0; background: #fff">
        <div class="w100">
          <el-table
            v-adaptive
            height="100px"
            style="width: 100%"
            :data="tableData"
            border
          >
            <el-table-column
              align="center"
              prop="date"
              label="序号"
              type="index"
              sortable
              width="60"
            >
            </el-table-column>
            <el-table-column prop="name" label="名称" sortable align="center">
            </el-table-column>
            <el-table-column
              prop="version"
              label="版本"
              align="center"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="createdDate"
              label="创建时间"
              align="center"
              sortable
            >
              <template slot-scope="scope">
                {{ scope.row.createdDate | formatDate }}
              </template>
            </el-table-column>
            <el-table-column
              prop="author"
              label="创建人"
              align="center"
              sortable
            >
            </el-table-column>
            <el-table-column prop="state" label="状态" align="center" sortable>
              <template slot-scope="scope">
                <el-tag
                  type="danger"
                  size="small"
                  effect="dark"
                  v-if="scope.row.state == 'false'"
                  >禁用</el-tag
                >
                <el-tag
                  type="success"
                  size="small"
                  v-if="scope.row.state == 'true'"
                  >启用</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="操作"
              width="250"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  :type="scope.row.state == 'false' ? 'primary' : 'danger'"
                  size="small"
                  @click="startUp(scope.row)"
                >
                  {{ scope.row.state == "true" ? "禁用" : "启用" }}
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="delRule(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            @pagination="pagination"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            :pageSizes.sync="pageSizes"
          /></div
      ></el-main>
      <el-aside
        style="background: #fff; padding: 10px; margin-left: 10px"
        width="18%"
        v-show="screen"
      >
        <Search @setFilterList="setFilterList" :userList="userList"></Search
      ></el-aside>
    </el-container>
    <AddDialog
      ref="detailsRef"
      :showDialog.sync="showDialog"
      @handleClose="handleClose"
      :list="templateList"
    ></AddDialog>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import AddDialog from "./components/AddDialog.vue";
import Search from "./components/searchFilter.vue";
import { getUserList } from "@/api/userAuth";
import {
  getRules,
  delRule,
  getRuleDetails,
  putRule,
} from "@/api/productionRule";

import { getTemplate } from "@/api/technology";
export default {
  components: {
    Pagination,
    AddDialog,
    Search,
  },
  data() {
    return {
      screen: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      showDialog: false,
      userList: [],
      templateList: [],
    };
  },
  async mounted() {
    getUserList().then((res) => {
      const { data } = res.data;
      this.userList = data;
    });
    this.getTemplates();
    this.init();
  },
  methods: {
    setFilterList(data) {
      if (data) {
        this.switchTextColor = "#2680D2";
        this.switchText = "显示筛选 ( 已筛选 )";
      } else {
        this.switchTextColor = "#666666";
        this.switchText = "显示筛选";
      }
      this.init(data);
    },
    handleEdit(row) {
      getRuleDetails(row.token).then((res) => {
        console.log("res.data :>> ", res.data);
        this.showDialog = true;
        this.$nextTick(() => {
          this.$refs.detailsRef.form = {
            name: res.data.name,
            state: res.data.state,
            version: res.data.version,
            token: res.data.token,
          };

          const { condition_1, condition_2, condition_3, condition_4 } =
            res.data;
          this.getTemplates(condition_3, condition_4);
          this.$refs.detailsRef.checkboxGroup1 = condition_1;
          this.$refs.detailsRef.checkboxGroup2 = condition_2;
        });
      });
    },
    delRule(row) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await delRule(row.token);
        this.$msg({
          type: "success",
          message: "删除成功!",
        });
        this.init();
      });
    },
    startUp(row) {
      const { state } = row;
      const text = state == "false" ? "启用" : "禁用";
      this.$confirm("是否确认" + text + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await putRule(
          {
            ...row,
            state: state == "true" ? "false" : "true",
          },
          row.token
        );
        this.$msg({
          type: "success",
          message: text + "成功!",
        });
        this.init();
      });
      console.log("row :>> ", row);
    },
    handleClose(isRefresh) {
      if (isRefresh) {
        this.init();
      }
      this.templateList = this.templateList.map((item) => {
        return {
          ...item,
          checkList1: [],
          checkList2: [],
        };
      });
      this.showDialog = false;
    },
    handleAdd() {
      this.showDialog = true;
    },
    init(data) {
      console.log("res :>> ", data);
      getRules({
        author: "",
        name: "",
        page: this.pageNum,
        pageSize: this.pageSize,
        state: "",
        token: "",
        version: "",
        ...data,
      }).then((res) => {
        this.total = res.data.numResults;
        this.tableData = res.data.results;
      });
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.init();
    },
    getTemplates(checkList1 = [], checkList2 = []) {
      getTemplate({
        page: 1,
        pageSize: 100,
      })
        .then((r) => {
          const { data } = r;
          // data.results = data.results.filter((item) => item.state == "true");
          data.results.map((item) => {
            if (!item.checkList1) {
              item.checkList1 = [];
            }
            if (!item.checkList2) {
              item.checkList2 = [];
            }
            if (checkList1.length) {
              checkList1.forEach((t) => {
                if (t.templateId == item.id) {
                  item.checkList1.push(Number(t.index));
                }
              });
            }
            if (checkList2.length) {
              checkList2.forEach((t) => {
                if (t.templateId == item.id) {
                  if (!item.checkList2) {
                    item.checkList2 = [];
                  }
                  item.checkList2.push(Number(t.index));
                }
              });
            } else {
              item.checkList2 = [];
            }
          });
          this.templateList = data.results;
          console.log(" this.templateList  :>> ", this.templateList);
        })
        .finally((f) => {});
    },
  },
};
</script>

<style>
</style>